<template>
    <BaseCard>
        <div class="flex">
            <div class="blue-radius"></div>
            <h2 class="page-title">标签管理</h2>
        </div>
        <div style="display: flex; justify-content: space-between; margin-bottom: 20px;">
            <el-input v-model="input.name" style="width: 376px; height: 40px;  --el-text-color-placeholder: #999999;"
                placeholder="请输入关键字" :suffix-icon="Search" size="large" clearable />
            <div>
                <el-button type="primary" plain @click="formRef?.openDialog(false)">新增标签</el-button>
            </div>
        </div>
        <!-- 下面的 -->
        <el-table :data="manageData.rows" style="width: 100% ; margin-bottom: 20px;" class="Organization-text">
            <el-table-column property="_id" label="编号">
            </el-table-column>
            <el-table-column property="name" label="标签名称">
            </el-table-column>
            <el-table-column property="creatorId.name" label="添加人">
            </el-table-column>
            <el-table-column property="updateTime" label="最后修改时间">
            </el-table-column>
            <el-table-column property="state" label="使用状态">
                <template #default="scope">
                    <el-switch v-model="scope.row.state" :active-value="1" :inactive-value="0"
                        @change="updateButtonTags(scope.row)" style="--el-switch-on-color: #13ce66;" active-text="启动"
                        inline-prompt inactive-text="禁用" />
                </template>
                <!--  -->
            </el-table-column>
            <el-table-column property="_id" label="操作">
                <template #default="scope">
                    <el-button link type="primary" @click="formRef?.openDialog(scope.row._id)">编辑</el-button>
                    <el-button link type="danger" @click="TagsDelete(scope.row._id)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>
        <div class="flex-end" style="margin-top: 22px; display: flex; justify-content: flex-end;">
            <el-pagination v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize"
                :page-sizes="[10, 20, 50, 100]" background :total="manageData.total"
                layout="total, sizes, prev, pager, next, jumper" />
        </div>
    </BaseCard>
    <ManageForm @findTags="findTags" ref="formRef" />
</template>

<script setup>
import { onMounted, reactive, ref, useTemplateRef, watch } from 'vue';
import { Search } from '@element-plus/icons-vue'
import { findTagsApi, updateTagsApi, deleteTagsApi } from '@/api/manage';
import ManageForm from './ManageForm.vue';
import { ElMessage } from 'element-plus';
const formRef = useTemplateRef('formRef')
const pageData = ref({ currentPage: 1, pageSize: 10 });
const manageData = reactive({
    rows: [],
    total: 0
});
const input = ref({});
onMounted(() => {
    findTags()
});

watch([pageData, input], () => {
    findTags()
}, { deep: true })
async function findTags() {
    const res = await findTagsApi({
        ...pageData.value,
        ...input.value
    })
    if (res.code == 200) {
        manageData.rows = res.data.rows;
        manageData.total = res.data.total;

    }
}
async function updateButtonTags(update) {
    const res = await updateTagsApi(update)
    if (res.code == 200) {
        ElMessage({
            type: 'success',
            message: '修改成功'

        })
    } else {
        ElMessage.error(res.message)
    }
    findTags()
}


async function TagsDelete(_id) {
    const res = await deleteTagsApi({ _id })
    if (res.code == 200) {
        ElMessage({
            type: 'success',
            message: '删除成功'

        })
    } else {
        ElMessage.error(res.message)
    }
    findTags()
}

</script>

<style scoped>
.topRectangle {
    width: 6px;
    height: 20px;
    background: inherit;
    background-color: rgba(41, 132, 248, 1);
    border: none;
    border-radius: 8px;
    margin-right: 20px;
}

.topPackage {
    display: flex;
    margin-bottom: 20px;

    span {
        font-weight: 500;
        font-style: normal;
        font-size: 18px;
        color: rgba(51, 51, 51, 0.898039215686275);

    }
}

.page-title {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 550;
    color: #333333E5;
}

.blue-radius {
    border-width: 0px;
    width: 6px;
    height: 20px;
    background: inherit;
    background-color: rgba(41, 132, 248, 1);
    border: none;
    border-radius: 8px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin-top: 4px;
    margin-right: 10px;
}
</style>